<template>
  <view class='popup_box' :class='{mack_show:content_show}' v-if='popup_show' @tap='close'>
    <!-- 底部弹窗 -->
    <view class="bottom_item" :class='{bottom_show:content_show && type=="bottom"}' v-if='type=="bottom"' @tap.stop='stop'>
      <slot/>
    </view>
    <view class='center_item' :class='{center_show: content_show && type == "center"}' v-if='type == "center"' @tap.stop='stop'>
      <slot/>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        default: 'bottom'
      }
    },
    data() {
      return {
        content_show: false,
        popup_show: false,
      }
    },
    methods: {
      stop(){},
      show() {
        uni.hideTabBar()
        this.popup_show = true;
        setTimeout(() => {
          this.content_show = true;
        },50)
      },
      close() {
        this.content_show = false;
        this.$store.state.extend_show = false;
        uni.showTabBar()
        this.$emit('close')
        setTimeout(() => {
          this.popup_show = false;
        },500)
      }
    }
  }
</script>

<style lang="scss" scoped>
.popup_box {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: all .5s;
  .bottom_item {
    position: absolute;
    transition: all .5s;
    width: 100%;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
  }
  .bottom_show {
    transform: translateY(0%);
  }
  .center_item {
    position: absolute;
    transition: all .5s;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
  }
  .center_show {
    opacity: 1;
  }
}
.mack_show {
  background: rgba(0,0,0,.4);
}
</style>